{% extends "app/base_site.html" %}

{% block title %} 控制面板 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">


    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>CPU利用率</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="cpuCharts" style="height:220px"></div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>内存利用率</h2>

              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="memoryCharts" style="height:220px"></div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>存储利用率</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="diskCharts" style="height:220px"></div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>视频行为分析系统</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <table class="table table-hover">
                <tbody>
                <tr>
                    <th scope="row">后台管理服务</th>
                    <th scope="row" id="videoAnalyzer_admin">00:00:00</th>
                  </tr>
                  <tr>
                    <th scope="row">流媒体服务</th>
                    <th scope="row" id="videoAnalyzer_mediaserver">00:00:00</th>
                  </tr>
                  <tr>
                   <th scope="row">视频分析器</th>
                    <th scope="row" id="videoAnalyzer_analyzer">00:00:00</th>
                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>系统信息</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <table class="table table-hover">
                <tbody>
                  <tr>
                    <th scope="row">运行</th>
                    <th scope="row" id="os_run_date_str">00:00:00</th>
                  </tr>
                    <tr>
                    <th scope="row">CPU</th>
                    <th scope="row" id="os_cpu_used_rate">0%</th>
                  </tr>

                  <tr>
                    <th scope="row">内存</th>
                    <th scope="row" id="os_virtual_mem_used_rate">0%</th>
                  </tr>

                   <tr>
                    <th scope="row">存储</th>
                    <th scope="row" id="os_disk_used_rate">0%</th>
                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>授权信息</h2>
              </ul>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <table class="table table-hover">
                <tbody>
                   <tr>
                    <th scope="row">授权状态</th>
                    <th scope="row" id="active_code_state_str">未授权</th>
                  </tr>
                 <tr>
                    <th scope="row">授权码生效时间</th>
                    <th scope="row" id="active_code_create_date">无</th>
                  </tr>
               <tr>
                    <th scope="row">授权码过期时间</th>
                    <th scope="row" id="active_code_expire_date">无</th>
                  </tr>

                 <tr>
                    <th scope="row">授权码有效时长</th>
                    <th scope="row" id="active_code_expire_hour">无</th>
                  </tr>


                   <!--
                   <tr>
                    <th scope="row">授权码备注</th>
                    <th scope="row" id="active_code_remark">无</th>
                  </tr>
                   -->

                </tbody>
              </table>

            </div>
          </div>
        </div>

        <div class="clearfix"></div>

    </div>


  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super}}

  <script src="/static/lib/highcharts/highcharts.js"></script>
  <script src="/static/lib/highcharts/modules/exporting.js"></script>
  <script src="/static/lib/highcharts-plugins/highcharts-zh_CN.js"></script>

    <script>
    Highcharts.setOptions({
            global: {
                    useUTC: false
            }
    });
    function activeLastPointToolip(chart) {
        let points = chart.series[0].points;
        chart.tooltip.refresh(points[points.length -1]);
    }
    let cpuCharts = Highcharts.chart('cpuCharts', {
		chart: {
				type: 'spline',
				marginRight: 10,
				events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
				}
		},
		title: {
				text: null
		},
		xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
		},
		 yAxis: [{
            min:0,
            title: {
                text: null
            },
            showFirstLabel: true
        }],
		tooltip: {
				formatter: function () {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this.y, 2);


				}
		},
		legend: {
				enabled: false
		},
		series: [{
				name: 'CPU利用率',
				data: (function () {
						// 生成随机值
						var data = [],
								time = (new Date()).getTime(),
								i;
						for (i = -9; i <= 0; i += 1) {
								data.push({
										x: time + i * 1000,
										y: 0 //Math.random()
								});
						}

						return data;
				}())
		}]
    });
    let memoryCharts = Highcharts.chart('memoryCharts', {
		chart: {
				type: 'spline',
				marginRight: 10,
				events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
				}
		},
		title: {
		    text: null
		},
		xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
		},
		 yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
            title: {
                text: null
            },
            showFirstLabel: true
        }],
		tooltip: {
				formatter: function () {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this.y, 2);
				}
		},
		legend: {
				enabled: false
		},
		series: [{
				name: '内存利用率',
				data: (function () {
						// 生成随机值
						var data = [],
								time = (new Date()).getTime(),
								i;
						for (i = -9; i <= 0; i += 1) {
								data.push({
										x: time + i * 1000,
										y: 0 //Math.random()
								});
						}

						return data;
				}())
		}]
    });
    let diskCharts = Highcharts.chart('diskCharts', {
		chart: {
				type: 'spline',
				marginRight: 10,
				events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
				}
		},
		title: {
				text: null
		},
		xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
		},
		 yAxis: [{
            min:0,
            title: {
                text: null
            },
            showFirstLabel: true
        }],
		tooltip: {
				formatter: function () {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this.y, 2);


				}
		},
		legend: {
				enabled: false
		},
		series: [{
				name: '磁盘利用率',
				data: (function () {
						// 生成随机值
						var data = [],
								time = (new Date()).getTime(),
								i;
						for (i = -9; i <= 0; i += 1) {
								data.push({
										x: time + i * 1000,
										y: 0 //Math.random()
								});
						}

						return data;
				}())
		}]
    });

    let ele_videoAnalyzer_admin = $("#videoAnalyzer_admin");
    let ele_videoAnalyzer_mediaserver = $("#videoAnalyzer_mediaserver");
    let ele_videoAnalyzer_analyzer = $("#videoAnalyzer_analyzer");
    //系统信息
    let ele_os_run_date_str = $("#os_run_date_str");
    let ele_os_cpu_used_rate = $("#os_cpu_used_rate");
    let ele_os_virtual_mem_used_rate = $("#os_virtual_mem_used_rate");
    let ele_os_disk_used_rate = $("#os_disk_used_rate ");
    //授权信息
    let eleStateStr= $("#active_code_state_str");
    //let eleRemark= $("#active_code_remark");
    let eleExpireHour= $("#active_code_expire_hour");
    let eleCreateDate= $("#active_code_create_date");
    let eleExpireDate= $("#active_code_expire_date");
    function f_show_auth_info(state,remark,expire_hour,create_date_str,expire_date_str) {
        let state_str;
        if(-2===state){
            state_str = "<span class='sun-state-error'>未授权</span";
        }else if(-1===state){
            state_str = "<span class='sun-state-error'>格式不正确</span";
        }else if(0===state){
            state_str = "<span class='sun-state-error'>已过期</span";
        }else if(1===state){
            state_str = "<span class='sun-state-success'>授权中</span>";
        }else{
            state_str ="<span class='sun-state-error'>授权失败</span>";
        }
        eleStateStr.html(state_str)

        /*
        if(-1===remark){
            eleRemark.html("无")
        }else{
            eleRemark.html(remark)
        }
       */

        if(-1===expire_hour){
            eleExpireHour.html("无")
        }
        else if(0===expire_hour){
            eleExpireHour.html("永久")
        }else{
            // expire_hour单位是int
            let expire_day = expire_hour/24;
            eleExpireHour.html(expire_day+" (天)")
        }
        if(-1===create_date_str){
            eleCreateDate.html("无")
        }else{
            eleCreateDate.html(create_date_str)
        }
        if(-1===expire_date_str){
            eleExpireDate.html("无")
        }else{
            eleExpireDate.html(expire_date_str)
        }
    }

    function f_getIndex() {
        $.ajax({
           url: '/api/getIndex',
           type: "get",
           async: true,
           data: {},
           dataType: "json",
           timeout: 0,
           error: function () {
                myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               if(1000 === res.code){
                    try {
                        let osInfo = res["osInfo"];
                        let os_cpu_used_rate = osInfo["os_cpu_used_rate"];
                        let os_virtual_mem_used_rate = osInfo["os_virtual_mem_used_rate"];
                        let os_disk_used_rate = osInfo["os_disk_used_rate"];

                        let os_cpu_used_rate_str = osInfo["os_cpu_used_rate_str"];
                        let os_virtual_mem_used_rate_str = osInfo["os_virtual_mem_used_rate_str"];
                        let os_disk_used_rate_str = osInfo["os_disk_used_rate_str"];

                        let os_run_date_str = osInfo["os_run_date_str"];

                        ele_os_run_date_str.html(os_run_date_str);
                        ele_os_cpu_used_rate.html(os_cpu_used_rate_str);
                        ele_os_virtual_mem_used_rate.html(os_virtual_mem_used_rate_str);
                        ele_os_disk_used_rate.html(os_disk_used_rate_str);

                        // 视频行为分析系统数据
                       let subServicesInfo = res["subServicesInfo"];
                       //Admin
                       let Admin = subServicesInfo["Admin"];
                       if(Admin.state===1){
                            ele_videoAnalyzer_admin.html("<span class='sun-state-success'>"+Admin.spend_date_str+"</span>")
                       }else{
                            ele_videoAnalyzer_admin.html("<span class='sun-state-error'>未启动</span>")
                       }

                       //MediaServer
                       let MediaServer = subServicesInfo["MediaServer"];
                       if(MediaServer.state===1){
                            ele_videoAnalyzer_mediaserver.html("<span class='sun-state-success'>"+MediaServer.spend_date_str+"</span>")
                       }else{
                           ele_videoAnalyzer_mediaserver.html("<span class='sun-state-error'>未启动</span>")
                       }
                        //Analyzer
                       let Analyzer = subServicesInfo["Analyzer"];
                       if(Analyzer.state===1){
                            ele_videoAnalyzer_analyzer.html("<span class='sun-state-success'>"+Analyzer.spend_date_str+"</span>")
                       }else{
                           ele_videoAnalyzer_analyzer.html("<span class='sun-state-error'>未启动</span>")
                       }

                       //设置图表数据
                        let x = (new Date()).getTime();
                        cpuCharts.series[0].addPoint([x, os_cpu_used_rate], true, true);
                        activeLastPointToolip(cpuCharts);
                        memoryCharts.series[0].addPoint([x, os_virtual_mem_used_rate], true, true);
                        activeLastPointToolip(memoryCharts);
                        diskCharts.series[0].addPoint([x, os_disk_used_rate], true, true);
                        activeLastPointToolip(diskCharts);
                    }catch (e) {

                    }
               }else{

               }
               setTimeout(function () {
                   f_getIndex();
               }, 3000);
           }
        });
    }
    function f_getAuth() {
        $.ajax({
               url: '/system/getAuth',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   if(1000 === res.code){
                       let info = res.info;

                        let state = parseInt(info["state"]);
                        let expire_hour = parseInt(info["expire_hour"]);
                        let remark = info["remark"];
                        let create_date_str = info["create_date_str"];
                        let expire_date_str = info["expire_date_str"];

                        if(isNaN(state)||isNaN(expire_hour)||create_date_str===""||expire_date_str===""){
                            f_show_auth_info(-1,-1,-1,-1,-1)
                        }else{
                            f_show_auth_info(state,remark,expire_hour,create_date_str,expire_date_str);
                        }
                   }else{
                        f_show_auth_info(-2,-1,-1,-1,-1)
                   }
               }
            });
    }

    window.onload = function (){
        f_getIndex();
        f_getAuth();
    };


</script>
{% endblock javascripts %}

